<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" v-auth="'goods.create'" @click="create"></el-button>
                <el-button type="danger" plain icon="el-icon-delete" v-auth="'goods.delete'" v-if="selection.length>0" :disabled="selection.length==0" @click="dels"></el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search" placeholder="搜索" @clear="this.$TABLE.searchSubmit(this)" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="this.$TABLE.searchSubmit(this)"></el-button>
                    <imiFilterBar :options="options" @filterChange="filterChange"></imiFilterBar>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" :params="params" @selection-change="selectionChange" @cell-dblclick="doubleClick" stripe remoteSort remoteFilter>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="id" prop="id"  sortable='custom'>
                                    
				</el-table-column>
                <el-table-column label="审核状态"   >
                    <template #default="scope"  >
                    <el-tag :type="scope.row.apply_status==2?'success':scope.row.apply_status==3?'danger':scope.row.apply_status==1?'warning':''">{{apply_status_option[scope.row.apply_status]}} </el-tag>
                    </template>  
                 
				</el-table-column>
                <el-table-column label="商品类型" prop="type" >
                    <template #default="scope"  >
                    <el-tag >{{type_option[scope.row.type]}} </el-tag>
                    </template> 
				</el-table-column>
                <el-table-column label="标题" prop="title" >
                                    
				</el-table-column>
                <!-- <el-table-column label="副标题" prop="subtitle" >
                                    
				</el-table-column> -->
                <el-table-column label="商品状态" prop="status" >
                    <template #default="scope"  >
                    <el-tag >{{status_option[scope.row.status]}} </el-tag>
                    </template> 
				</el-table-column>
    <!--            <el-table-column label="排序(从大到小)" prop="weigh"  sortable='custom'>-->
    <!--                <template #default>-->
    <!--                <el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>-->
    <!--                </template>                -->
				<!--</el-table-column>-->
                <el-table-column label="goodscate_ids" prop="goodscate_ids" >
                                    
				</el-table-column>
                <el-table-column label="所属分类" prop="category_ids" >
                                    
				</el-table-column>
                <el-table-column label="商品类型" prop="new_status" >
                    <template #default="scope"  >
                    <el-tag >{{new_status_option[scope.row.new_status]}} </el-tag>
                    </template>                     
				</el-table-column>
                <el-table-column label="视频封面" prop="video_image" >
                    <template #default="scope">
                    <el-avatar :src="scope.row.video_image" size="small"></el-avatar>
                    </template>                
				</el-table-column>

                <el-table-column label="视频文件" prop="video_file" >
                    <template #default="scope">
                        <sc-video :src="scope.row.video_file" ></sc-video>
                    </template>   
				</el-table-column>
                <el-table-column label="商品主图" prop="image" >
                    <template #default="scope">
                    <el-avatar :src="scope.row.image" size="small"></el-avatar>
                    </template>                
				</el-table-column>
  

                <el-table-column label="轮播图" prop="images" >
                    <template #default="scope">
                        <el-avatar  v-if="scope.row.images==null" :src="scope.row.images" size="small"></el-avatar>
                        <!--<el-avatar v-else v-for="(item,key) in scope.row.images.split(',')" :key="key"  :src="item" size="small"></el-avatar>-->
                          <el-avatar v-else v-for="item, in scope.row.images.split(',')"  :src="item" size="small"></el-avatar>
                    </template>                             
                </el-table-column>   

                <!-- <el-table-column label="参数详情" prop="params" >
                                    
				</el-table-column> -->
                <el-table-column label="价格" prop="price" >
                                    
				</el-table-column>
                <el-table-column label="原价" prop="original_price" >
                                    
				</el-table-column>
                <el-table-column label="是否多规格" prop="is_sku" >
                                    
				</el-table-column>
                <el-table-column label="收藏人数" prop="likes" >
                                    
				</el-table-column>
                <el-table-column label="浏览人数" prop="views" >
                                    
				</el-table-column>
                <el-table-column label="销量" prop="sales" >
                                    
				</el-table-column>
                <el-table-column label="显示销量" prop="show_sales" >
                                    
				</el-table-column>
                <el-table-column label="服务标签" prop="service_ids" >
                                    
				</el-table-column>
                <!-- <el-table-column label="发货方式" prop="dispatch_type" >
                                    
				</el-table-column> -->
                <!-- <el-table-column label="发货模板" prop="dispatch_ids" >
                                    
				</el-table-column> -->
                <el-table-column label="卖家现金服务费比率" prop="goods_service_ratio" >
                                    
				</el-table-column>
                <el-table-column label="添加时间" prop="createtime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="更新时间" prop="updatetime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="删除时间" prop="deletetime"  align="right" width="180" :formatter="this.$TABLE.datetime">
                                    
				</el-table-column>
                <el-table-column label="店铺ID" >
                    <template #default="scope"  >
                    <el-tag >{{store_id_option[scope.row.store_id]}} </el-tag>
                    </template>   
                    <!-- <template #default="scope"  >
                    <el-tag >{{store_id_option[scope.row.store_id]}} </el-tag>
                    </template>  -->
				</el-table-column>
                <el-table-column label="品牌ID" prop="goodsbrand_id" >
                                    
				</el-table-column>
                <el-table-column label="发货地址" prop="send_addr" >
                                    
				</el-table-column>
                
                <el-table-column label="操作" fixed="right" align="right" width="140">
                    <template #default="scope">
                        <el-button type="text" v-auth="'goods.update'" size="small" @click="update(scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="del(scope.row)">
                            <template #reference>
                                <el-button type="text" v-auth="'goods.delete'" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import saveDialog from './save';
    import imiFilterBar from '@/components/imiFilterBar';
    import scVideo from '@/components/scVideo';
    export default {
        name: 'goods',
        
        components: {
            saveDialog,
            imiFilterBar,
            scVideo
        },
        data() {
            return {
                options: [
                    {
                        label: 'id',
                        value: 'id',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '审核状态',
                        value: 'apply_status',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '商品类型',
                        value: 'type',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '标题',
                        value: 'title',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '副标题',
                        value: 'subtitle',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '商品状态',
                        value: 'status',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: 'goodscate_ids',
                        value: 'goodscate_ids',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '所属分类',
                        value: 'category_ids',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '商品类型',
                        value: 'new_status',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '视频文件',
                        value: 'video_file',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '轮播图',
                        value: 'images',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '参数详情',
                        value: 'params',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '价格',
                        value: 'price',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '原价',
                        value: 'original_price',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '是否多规格',
                        value: 'is_sku',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '收藏人数',
                        value: 'likes',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '浏览人数',
                        value: 'views',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '销量',
                        value: 'sales',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '显示销量',
                        value: 'show_sales',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '服务标签',
                        value: 'service_ids',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '发货方式',
                        value: 'dispatch_type',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '发货模板',
                        value: 'dispatch_ids',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '卖家现金服务费比率',
                        value: 'goods_service_ratio',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '添加时间',
                        value: 'createtime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '更新时间',
                        value: 'updatetime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '删除时间',
                        value: 'deletetime',
                        type: 'datetimerange',
                        operator: 'between',
                    },
					{
                        label: '店铺ID',
                        value: 'store_id',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '品牌ID',
                        value: 'goodsbrand_id',
                        type: 'text',
                        operator: '=',
                    },
					{
                        label: '发货地址',
                        value: 'send_addr',
                        type: 'text',
                        operator: '=',
                    },
					                    
                ],
                dialog: {
                    save: false
                },
                apiObj: this.$API.goods.read,
                selection: [],
                search: '',
                params:{},
                apply_status_option:{"0":"未知","1":"申请中","2":"已通过","3":"已拒绝"},
				type_option:{"normal":"实体商品","virtual":"虚拟商品","service":"服务"},
				status_option:{"up":"上架","hidden":"隐藏商品","down":"下架"},
				new_status_option:{"new":"全新","unused":"闲置","soon":"临期"},
				dispatch_type_option:{"express":"物流快递","selfetch":"用户自提","store":"商家配送","autosend":"自动发货","service":"上门核销"},
                store_id_option:[],
            }
        },
        created() {
            this.$TABLE.setFilterValue(this);
        },
        mounted() {
            this.$TABLE.rowDrop(this,this.$API.goods.sort);
            this.getStore();
        },
        methods: {
            async getStore(){
                
                var res = await this.$API.store.read.get();
                var list = res.data.list;
                var store_list_option = [];
                for (let index = 0; index < list.length; index++) {
                    store_list_option[list[index].id] = list[index].name;                    
                }
                console.log(store_list_option);
                this.store_id_option = store_list_option;
            },
            doubleClick(row) {
                this.update(row);
            },
            filterChange(data) {
                this.$TABLE.filter(data, this);
            },
            create() {
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            update(row) {
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('update').setData(row)
                })
            },
            async del(row) {
                var res = await this.$API.goods.delete.post({ids: row.id});
                if (res.code == 200) {
                    this.$refs.table.refresh()
                    this.$message.success(res.message)
                } else {
                    this.$alert(res.message, "提示", {type: 'error'})
                }
            },
            async dels() {
                if (!this.selection.length) {
                    this.$message.warning("请选择要删除的数据")
                    return false;
                }
                var ids = [];
                for (const i in this.selection) {
                    ids.push(this.selection[i].id)
                }
                this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading();
                    this.$API.goods.delete.post({ids:ids}).then(res => {
                        if (res.code == 200) {
                            this.$refs.table.refresh()
                            this.$message.success(res.message)
                        } else {
                            this.$message.error(res.message)
                        }
                        loading.close();
                    });
                })
            },
            selectionChange(selection) {
                this.selection = selection;
            },
            handleSuccess() {
                this.$refs.table.refresh()
            }
        }
    }
</script>